<template>
  <div>
    <div class="tips">
      <el-alert
        style="background: skyblue; width: 400px;"
        title="社保在缴 公积金在缴 增员 减员 入职 离职"
        type="info"
        show-icon
      />
    </div>
    <div class="bumen">
      <div class="title">部门</div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in departList" :key="item.id" :label="item.name" />

        </el-checkbox-group>
      </div>
    </div>
    <div class="bumen">
      <div class="title">社保城市</div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="北京" />
          <el-checkbox label="上海" />
          <el-checkbox label="深圳" />
          <el-checkbox label="广州" />
          <el-checkbox label="重庆" />
          <el-checkbox label="西安" />
        </el-checkbox-group>
      </div>
    </div>
    <div class="bumen">
      <div class="title">公积金城市</div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="北京" />
          <el-checkbox label="上海" />
          <el-checkbox label="深圳" />
          <el-checkbox label="广州" />
          <el-checkbox label="重庆" />
          <el-checkbox label="西安" />
        </el-checkbox-group>
      </div>
    </div>
    <div class="social_table">
      <el-table :data="social">
        <el-table-column :label="$t('social.index')" prop="id" sortable />
        <el-table-column :label="$t('social.userName')" prop="username" sortable />
        <el-table-column :label="$t('social.mobile')" prop="mobile" sortable />
        <el-table-column :label="$t('social.workNumber')" prop="workNumber" sortable />
        <el-table-column :label="$t('social.departMent')" prop="departmentName" sortable />
        <el-table-column label="入职时间" prop="timeOfEntry" sortable />
        <el-table-column label="离职时间" sortable />
        <el-table-column label="社保城市" sortable prop="socialCity" />
        <el-table-column label="公积金城市" sortable prop="productCity" />
        <el-table-column label="社保基数" sortable prop="socialMoney" />
        <el-table-column label="公积金基数" sortable prop="productMoney" />

      </el-table>
    </div>
  </div>
</template>

<script>
import { getDepartmentApi, getSocialApi } from '@/api/social'
export default {
  name: 'VueHrimIndex',

  data() {
    return {
      checkList: [],
      departList: [], // 部门列表数据
      page: 1,
      pageSize: 10,
      total: 0,
      socialList: []// 社保人员列表

    }
  },
  computed: {
    social() { // 处理后的 社保列表
      const arr = ['北京', '天津', '上海', '深圳', '西安', '广州']
      const money = [6000, 8000, 10000, 12000, 5000, 14000, 24000]
      const myarr = this.socialList.map(item => {
        item.socialCity = arr[Math.floor(Math.random() * arr.length)] // 社保城市
        item.productCity = arr[Math.floor(Math.random() * arr.length)] // 公积金城市
        item.socialMoney = money[Math.floor(Math.random() * money.length)]// 社保基数
        item.productMoney = money[Math.floor(Math.random() * money.length)]// 公积金基数
        return item
      })
      return myarr
    }
  },
  mounted() {

  },
  created() {
    this.getDepart()
    this.getSocialList()
  },
  methods: {
    async getDepart() { // 获取部门数据
      const res = await getDepartmentApi()
      console.log(res, '---------------')
      this.departList = res
    },
    async getSocialList() { // 获取社保人员列表的接口
      const res = await getSocialApi({
        page: this.page,
        pageSize: this.pageSize,
        total: this.total
      })
      console.log(res, '8888888888888')
      this.socialList = res.rows
      this.total = res.total
    }
  }

}
</script>
<style lang="scss" scoped>
    .tips{
      height:80px;
      margin:20px 0 0 20px;
    }
    .bumen{
      height:90px;
      background:white;
      display:flex;
      margin-left:20px;
      .title{
        width:100px;
        margin-right:20px;
        font-size:16px;
      }
    }
</style>
